<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link  https://www.bilibili.com/video/av26256249/?p=1
* @link  
* @link  
* @link  https://www.bootcdn.cn/
* @link  http://mockjs.com/
* @link  http://doc.vue-js.com/
* @link  https://v4.bootcss.com/docs/4.0/getting-started/introduction/
* @link  http://www.fontawesome.com.cn/
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="en">

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>User UI</title>
  <!-- Icons字体图标 CSS-->
  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <!-- Main styles for this application-->
  <link href="css/style.css" rel="stylesheet">
  <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
</head>

<body class="app header-fixed aside-menu-fixed ">
  <header class="app-header navbar">
    <a class="navbar-brand" href="#">
      <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>学习平台
    </a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item px-3">
        <a class="nav-link" href="#">工作台</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">课程管理</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">设置</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-bell"></i>
          <span class="badge badge-pill badge-danger">6</span>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-list"></i>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-location-pin"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-header text-center">
            <strong>Account</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-bell-o"></i> Updates
            <span class="badge badge-info">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-envelope-o"></i> Messages
            <span class="badge badge-success">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-tasks"></i> Tasks
            <span class="badge badge-danger">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-comments"></i> Comments
            <span class="badge badge-warning">42</span>
          </a>
          <div class="dropdown-header text-center">
            <strong>Settings</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-user"></i> Profile</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-wrench"></i> Settings</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-usd"></i> Payments
            <span class="badge badge-secondary">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-file"></i> Projects
            <span class="badge badge-primary">42</span>
          </a>
          <div class="divider"></div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-shield"></i> Lock Account</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-lock"></i> Logout</a>
        </div>
      </li>
    </ul>
    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
      <span class="navbar-toggler-icon"></span>
    </button>
  </header>
  <div class="app-body">
    <main class="main">
      <!-- Breadcrumb-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">首页</li>
        <li class="breadcrumb-item active">用户管理</li>
        <li class="breadcrumb-item active"><a href="http://127.0.0.1:5500/text1.html">返回登录UI</a></li>
        <!-- Breadcrumb Menu-->
      </ol>
      <div class="container-fluid">
        <div class="animated fadeIn">
          <div class="card">
            <div class="card-header">
              <i class="icon-people" aria-hidden="true"></i>信息管理
              <div class="card-header-actions">
                <a class="card-header-action btn-setting" href="#" data-toggle="modal" data-target="#primaryModal"
                  data-whatever="@mdo">
                  <i class="icon-plus"></i> 新增
                </a>
                <a class="card-header-action btn-close" href="#" data-toggle="modal" data-target="#dangerModal">
                  <i class="icon-trash"></i> 删除
                </a>
              </div>
            </div>
            <div class="card-body collapse show" id="collapseExample">
              <table class="table table-responsive-sm table-bordered table-striped" id="itemsTemplate">
                <thead>
                  <tr>
                    <th><input type="checkbox" name="checkall" id="czf" onclick="quanxuan(this,'CZF')"/></th>
                    <th>用户名</th>
                    <th>注册时间</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in items">
                    <td><input type="checkbox" class="CZF" name="checkbox" />#{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.registerDate}}</td>
                    <td>{{item.role}}</td>
                    <td>{{item.status}}</td>
                    <td>
                      <button class="btn btn-ghost-primary" type="button" data-toggle="modal"
                        data-target="#primaryModal"><i class="icon-note"></i> 编辑</button>
                      <button class="btn btn-ghost-danger" type="button" data-toggle="modal"
                        data-target="#dangerModal"><i class="fa fa-trash-o fa-lg"></i>
                        删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 翻页 -->
              <div id="">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="http://127.0.0.1:5500/text3.html">Prev</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="http://127.0.0.1:5500/text3.html">1</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="http://127.0.0.1:5500/text3.html">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="http://127.0.0.1:5500/text3.html">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="http://127.0.0.1:5500/text3.html">4</a>
                  </li>
                  <li class="page-item active">
                    <a class="page-link" href="http://127.0.0.1:5500/text3.html">Next</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
  <footer class="app-footer">
    <div>
      <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
      <span>&copy; 2018 creativeLabs.</span>
    </div>
    <div class="ml-auto">
      <span>Powered by</span>
      <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
    </div>
  </footer>
  <!-- Modal增加 -->
  <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-primary" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">新增</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
            <div class="form-group row">
              <label class="col-md-3 col-form-label" for="text-input">用户名</label>
              <div class="col-md-9">
                <input class="form-control" id="text-input" type="text" name="text-input" placeholder="用户名">
                <span class="help-block">用户名必须4到16位(字母，数字，下划线，减号)</span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 col-form-label" for="email-input">注册时间</label>
              <div class="col-md-9" id="itemstime">
                <input class="form-control" id="1" type="text" name="disabled-input" placeholder="年 -月-日 --:--"
                  disabled=""> </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 col-form-label" for="password-input">角色</label>
              <div class="col-md-9">
                <select class="custom-select">
                  <option selected>教师</option>
                  <option value="1">学生</option>
                  <option value="2">学生</option>
                  <option value="3"></option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-3 col-form-label">状态</label>
              <div class="col-md-9 col-form-label">
                <div class="form-check form-check-inline mr-1">
                  <input class="form-check-input" id="inline-radio1" type="radio" value="option1" name="inline-radios">
                  <label class="form-check-label" for="inline-radio1">激活</label>
                </div>
                <div class="form-check form-check-inline mr-1">
                  <input class="form-check-input" id="inline-radio2" type="radio" value="option2" name="inline-radios">
                  <label class="form-check-label" for="inline-radio2">禁用</label>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" type="button">保存</button>
          <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
        </div>
      </div>
      <!-- /.modal-content-->
    </div>
    <!-- /.modal-dialog-->
  </div>
  <!-- Modal删除 -->
  <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-danger" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">危险</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>记录删除后将无法恢复！确定要删除吗？</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-danger" id="delete" type="button"
            onclick="DeleteRow(document.getElementById('itemsTemplate'),1)">确认</button>
          <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal删除成功 -->
  <div class="modal fade show" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-success" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">成功</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>删除成功!</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success" type="button" data-dismiss="modal">确定</button>
        </div>
      </div>
      <!-- /.modal-content-->
    </div>
    <!-- /.modal-dialog-->
  </div>
  <!-- CoreUI and necessary plugins-->
  <script src="vendors/jquery/js/jquery.min.js"></script>
  <script src="vendors/popper.js/js/popper.min.js"></script>
  <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendors/pace-progress/js/pace.min.js"></script>
  <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
  <!-- <script src="vendors/chart.js/js/Chart.min.js"></script> -->
  <!-- <script src="vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script> -->
  <!-- <script src="js/main.js"></script> -->
  <script src="js/mock-min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- <script src="https://cdn.bootcss.com/vue/2.6.9/vue.common.dev.js"></script> -->
  <!-- 获取数据 -->
  <script>
    var items = [];
    $(function () {
      //使用Mock.js库，模拟一个api数据访问接口
      //api的访问地址为：http://127.0.0.1:5500/czf
      Mock.mock("http://127.0.0.1:5500/czf", {
        'data|10-20': [{
          // 'id|+1':1,
          id: "@increment()",
          name: "@cname",
          'role|1': ["教师", "学生"],
          registerDate: "@datetime()",
          'status|1': ["激活", "禁用"]
        }],
        success: true,
        code: 200,
        msg: "Success"
      });
      //使用jQuery提供的getJSON方法，向服务器发送一个请求
      //返回的结果由第二个参数的function处理
      $.getJSON("http://127.0.0.1:5500/czf", function (response) {
        items = response.data;
        //使用vue.js框架，将response.data数据填充到itemsTemplate模板
        var app = new Vue({
          el: '#itemsTemplate',
          data: {
            items: items
          }
        })
        return;
      });

    });
  </script>

  <!-- 二级响应Model -->
  <script>
    $("#delete").click(function () {
      $('#dangerModal').modal('hide');
      $('#successModal').modal('show');
    });
  </script>

  <!-- 获取系统时间 -->
  <script type="text/javascript">
    window.setInterval("showtime()", 1000);

    function showtime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hh = date.getHours();
      var mi = date.getMinutes();
      var ss = date.getSeconds();
      // var wk="星期"+"日一二三四五六".charAt(date.getDay());
      document.getElementById("itemstime").innerHTML = year + "-" + month + "-" + day + " " + hh + ":" + mi + ":" + ss +
        " "; //+wk;
    }
  </script>

  <!-- 删除数据 -->
  <script>
    function DeleteRow(table, index) {
      //从最后一行开始删除一直检索到指定的目标
      for (var i = table.rows.length - 1; i > 0; i--) {
        var chkOrder = table.rows[i].cells[0].firstChild;
        if (chkOrder) {
          if (chkOrder.type = "CHECKBOX") {
            if (chkOrder.checked) {
              //执行删除
              table.deleteRow(i);
            }
          }
        }
      }
    }
  </script>

  <!-- 全选复选框 -->
  <script>
      //全选,取消全选
      function quanxuan(qx, class_name) {
        //获取复选框ID
        var ck = document.getElementsByClassName(class_name);
        //让下面所有的多选选中状态改变
        if (qx.checked) {
          for (i = 0; i < ck.length; i++) {
            ck[i].setAttribute("checked", "checked");
            //状态改变为选中
          }
        } else {
          for (var i = 0; i < ck.length; i++) {
            ck[i].removeAttribute("checked");
            //移除选中
          }
        }
      }
    </script>
  <!-- <script type="text/javascript">
    $('input[name="checkall"]').on("click", function () {
      if ($(this).is(':checked')) {
        $('input[name="checkbox"]').each(function () {
          $(this).prop("checked", true);
        });
      } else {
        $('input[name="checkbox"]').each(function () {
          $(this).prop("checked", false);
        });
      }
    });
  </script> -->
  <!-- <script type="text/javascript">
    $(document).ready(function (e) {
      $("#czf").click(function () {
        if (this.checked) {
          $("[name=checkbox]").attr("checked", true);
        } else {
          $("[name=checkbox]").attr("checked", false);
        }
      });
    });
  </script> -->
</body>

</html>